<template lang="jade">
#search-result
  //- .header
    a.backup.icon-angle-left(href='javascript:history.go(-1)')
    h1.page-title 检索结果
  .result-tips.blue-bar 关键字'<span><b>{{keyword}}</b></span>'检索结果共 {{result.count}} 条
  // vue-pull-refresh(:on-refresh='onRefresh')
  #scroll-container(v-infinite-scroll="loadMore", infinite-scroll-disabled="busy", infinite-scroll-distance="20")
    .list-item(v-for='(item, index) in result.list')
      .weui-media-box.weui-media-box_appmsg(@click.prevent.stop='view(item.BOOKRECNO)')
        .weui-media-box__hd
          img.weui-media-box__thumb(:src='item.Biblio.COVER')
        .weui-media-box__bd
          h3.books-name {{item.Biblio.TITLE}}
          .author 作者：{{item.Biblio.AUTHOR}}
          .publishing-company 出版社：{{item.Biblio.PUBLISHER}}
          .isbn ISBN: {{item.Biblio.ISBN}}
          .classNo 分类号：{{item.Biblio.CLASSNO}}
  //- #page-nav
    //- button(v-if='pageNum > 1', @click='prevPage') 上一页
    //- button(@click='nextPage') 继续加载
  div(v-show="!isEmpty")
    .weui-loadmore(v-show="result.next")
      i.weui-loading
      span.weui-loadmore__tips 加载中
    .weui-loadmore.weui-loadmore_line1(v-show="!result.next")
      span.weui-loadmore__tips 已全部加载
  div(v-show="isEmpty")
    .weui-loadmore.weui-loadmore_line(v-show="!result.next")
      span.weui-loadmore__tips 找不到结果
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
// import VuePullRefresh from 'vue-pull-refresh'
import infiniteScroll from 'vue-infinite-scroll'

export default {
  directives: {
    infiniteScroll
  },
  data () {
    return {
      keyword: this.$route.params.keyword,
      keyname: this.$route.query.fieldname || 'title'
      // pageNum: this.$route.query.pagenum ? this.$route.query.pagenum : 1
    }
  },
  computed: {
    busy () {
      return this.result.loading || this.result.list.length === 0 || !this.result.next
    },
    isEmpty () {
      return !this.result.loading && this.result.list.length === 0
    },
    ...mapGetters({
      'result': 'searchResult'
    })
  },
  updated () {
    // console.log('updated', this.result)
  },
  mounted () {
    this.pageNum = this.result.pageNum
    this.searchByPage()
  },
  methods: {
    ...mapActions([
      'search'
    ]),
    nextPage () {
      if (!this.result.next) return
      this.pageNum++
      this.searchByPage()
    },
    prevPage () {
      if (this.pageNum <= 1) return
      this.pageNum--
      this.searchByPage()
    },
    searchByPage () {
      this.search({
        keyname: this.keyname,
        keyword: this.keyword,
        pageNumber: this.pageNum
      })
    },
    loadMore () {
      console.log('loading more')
      this.nextPage()
    },
    view (id) {
      this.$router.push({
        name: 'bookInfo',
        params: {
          bookId: id
        }
      })
    }
  }
}
</script>

<style lang="scss">
#page-nav {
  text-align: center;
  padding: 4px 0;
  button {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 8px;
    margin: 2px 4px;
    background: none;
    font-size: 12px;
    outline: none;
  }
}
#search-result {
  // height: 100vh;
  height: 100%;
  // overflow-y: scroll;
  // margin-top: 40px;
}
.result-tips {
  // position: absolute !important;
  // top: 40px;
  z-index: 10;
  width: 100%;
}
#scroll-container {
  // min-height: 100%;
}
</style>
